<template>
  <div class="configure-core-wrapper">
    <el-collapse :value="collapse.expanded" v-if="Object.keys(options).length">
      <el-collapse-item
        v-for="(key) in Object.keys(collapse).filter(key => key !== 'expanded')"
        :key="key"
        :title="collapse[key].title"
        :name="collapse[key].name"
      >
      <div>
        <configure-group
          :form="form[key]"
          :options="options[key]"
          @onFormItemChange="(arg) => $emit('onFormItemChange', key, arg)"
        />
      </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { Collapse, CollapseItem } from "element-ui";
// import "element-ui/lib/theme-chalk/index.css";

import ConfigureGroup from "./configure-group.vue";

export default {
  components: {
    'el-collapse': Collapse,
    'el-collapse-item': CollapseItem,
    "configure-group": ConfigureGroup,
  },
  props: {
    form: {
      type: Object,
      default: () => ({}),
    },
    options: {
      type: Object,
      default: () => ({}),
    },
    collapse: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {};
  },
};
</script>

<style scoped>
.configure-core-wrapper {
  padding: 10px;
  margin: 0 10px;
}
</style>